<template>
	<view>
		<view class="home">
			<u-navbar bgColor="transparent" :fixed="false" height="44" :is-back="true">
				<view slot="left"></view>
				<view slot="center" class="white size32 bold600">实况</view>
			</u-navbar>
			<scroll-view class="pad_l32 pad_r32 box " :style="wrap_con" scroll-y="true">
				<view class="boxs">
					{{ temp }}℃ 
				</view>
				<view class="boxss">
					{{ windDir }}  {{ windScale }}级 {{ text }}
				</view>
				<view class="hei28"></view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				wrap_con: '',
				latitude: null,
				longitude: null,
				temp: null, // 多少摄氏度
				windDir: null, // 风向
				windScale: null,  // 风速
				windSpeed: null,  // 多少公里每小时
				text: null // 天气描述 多云
			};
		},
		computed: {},
		watch: {},
		onLoad() {},
		onShow() {
			this.wrap_con = getApp().globalData.wrap_con;
			this.getlonglat();
		},
		onHide() {},
		methods: {
			getlonglat() {
				let that = this
				wx.getLocation({
				 type: 'wgs84',
				 success (res) {
				   that.latitude = res.latitude
				   that.longitude = res.longitude
				   that.getdity(res.longitude,res.latitude,that);
				 }
				})
			},
			getdity(x,y,that) {
				let location = `${x},${y}`;
				let key = 'a36427c673cd4af4b03954e036e0b46e';
				// 调用
				wx.request({
					url: `https://devapi.qweather.com/v7/weather/now?key=${key}&location=${location}`,
					success(res) {
						that.temp = res.data.now.temp
						that.windDir = res.data.now.windDir
						that.windScale = res.data.now.windScale
						that.windSpeed = res.data.now.windSpeed
						that.text = res.data.now.text
						console.log(res);
					}
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	.home {
		height: 100vh;
		background: linear-gradient(360deg, #F8F8F8 50%, #b59ee6 100%);
		.boxs {
			height: 200rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 40px;
			color: #fff;
		}
		.boxss {
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			color: #fff;
		}

		.bor1 {
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
			padding: 40rpx 46rpx;
			box-sizing: border-box;
		}

		.bbdbbd {
			display: flex;
			flex-direction: column;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
			padding: 40rpx 0;
			box-sizing: border-box;

			.wid112 {
				margin-left: 46rpx;
			}

			.ffg {

				padding-left: 40rpx;
				padding-top: 20rpx;
				font-size: 36rpx;
			}
		}

		.bor0 {
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
		}

		.hhjjliu {
			color: #A1A3A6
		}


	}
</style>
